<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
    name: "AddCustomSymbol.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
            map.setZoom(8)

            let geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "message": "Foo",
                            "iconSize": [60, 60]
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.324462890625,
                                29.024695711685304
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "message": "Bar",
                            "iconSize": [50, 50]
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.2158203125,
                                29.97189158092897
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "message": "Baz",
                            "iconSize": [40, 40]
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.29223632812499,
                                29.28151823530889
                            ]
                        }
                    }
                ]
            };
            // add markers to map
            geojson.features.forEach(function (marker) {
                // create a DOM element for the marker
                let el = document.createElement('div');
                el.className = 'marker';
                el.style.backgroundImage = `url(${window.location.origin}/mapbox/libs/mapbox/assets/` + marker.properties.iconSize[0] + '.jpg)';
                el.style.width = marker.properties.iconSize[0] + 'px';
                el.style.height = marker.properties.iconSize[1] + 'px';

                el.addEventListener('click', () => {
                    window.alert(marker.properties.message);
                });

                // add marker to map
                new mapboxgl.Marker(el)
                    .setLngLat(marker.geometry.coordinates)
                    .addTo(map);
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped lang="scss">
:deep(.marker) {
    display: block;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}
</style>
